
<template>
  <Row>
    <Select v-model="selectedGroupId" style="width:400px" @on-change="getItemValue">
      <Option v-for="(item,index) in groupList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
    </Select>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;width:800px">
        <Card shadow>
          <chart-pie ref="pie" style="height: 400px;" :value="option" :text="jktitle"></chart-pie>
        </Card>
      </i-col>
    </Row>
  </Row>
</template>

<script>
  import 'echarts/lib/chart/pie'
  import { ChartPie } from '_c/charts'
  export default {
    name: "select-one",
    components: {
      ChartPie,
    },
    data(){
      return {
        option :[
          { value: 0, name: '未到人数' },
          { value: 0, name: '实到人数' }
        ],
        jktitle:"今日 9:00 监控统计",
        groupList:[],
        selectedGroupId:'',
      }
    },
    methods:{
      getItemValue (id) {
        console.log(id)
        let url = 'api/flow/'+id+'/'
        this.$axios.get(url).then((response) => {
          if (response.data.success) {
              let tmp_data = response.data.data
              this.option[0].value = tmp_data.should_stay - tmp_data.today_stay
              this.option[1].value = tmp_data.today_stay
              this.$refs.pie.init()
              console.log(response.data.data)
          }
        }).catch((response) => {
          console.log(response)
        })
        console.log(id)
      }
    },
    mounted(){
      this.$axios.get('/api/camera_group/').then((response) => {
        if (response.data.success) {
          console.log(response)
          this.groupList = response.data.data
        }
      }).catch((response) => {
         console.log(response)
      })
    },
  }
</script>

<style scoped>

</style>
